<template>
    <view>
        <!-- 第一行 -->
        <view class="function-input1" v-if="isShow1">
            <view v-if="isShowcheckbox2"  class="function-input1-checkbox-box">

                <checkbox v-if="isShowcheckbox1" selectedColor="#3399FF" class="function-input1-checkbox"
                     :checked="checkboxvalue" @tap="handleCheckboxChange"  />

            </view>
            <text class="function-input1-text" :style="{
                'min-width': titleMinwidth
            }"> {{ title1 }}</text>

            <uni-easyinput @input="emit('update:input1', $event)" errorMessage v-model="input1" focus :styles="{

                'font-size': '20px',
                'height': '40px',
            }" @change="handleChange" ></uni-easyinput>

            <view class="function-input1-buttonview">
                <button v-if="isShowbutton1" @click="open"
                    class="function-input1-button  function-input1-button1">{{ buttontext1 }}</button>

            </view>

        </view>

    </view>
    <!-- 弹出查询页面 -->
    <view>
        <uni-popup ref="popup" background-color="#fff" @touchstart.native.passive destroy-on-close="false">
            <view class="popup-content">
                <HouseSelect :propsselecttitle="title1" @propspuop="propspuop" 
                    v-model:code="input1">
                </HouseSelect>



            </view>
        </uni-popup>
    </view>
</template>

<script setup lang="ts">
import { ref, onUnmounted,watch, onMounted } from "vue"
//引入仓库查询
import HouseSelect from '@/components/HouseSelect copy.vue'

//父组件传递过来的参数
const props = defineProps({
    //第一行是否显示
    isShow1: {
        type: Boolean,
        default: true
    },
    //第一行是否显示复选框
    isShowcheckbox1: {
        type: Boolean,
        default: false
    },
    //第一行是否最外层显示复选框，不显示就不占用位置
    isShowcheckbox2: {
        type: Boolean,
        default: true
    },
  //第一行复选框绑定的值
    checkboxvalue: {
        type: Boolean,
        default: false
    },
    //第一行标题
    title1: {
        type: String,
        default: "仓库"

    },
    //第一行输入框内容
    input1: {
        type: String,
        default: ""
    },

      //第一行是否显示按钮
    isShowbutton1: {
        type: Boolean,
        default: false
    },
    //第一行按钮文字
    buttontext1: {
        type: String,
        default: "..."
    },
    //设置标题最小宽度
    titleMinwidth: {
        type: String,
        default: "20px"
    },

})
// 返回的给父组件
const emit = defineEmits(['update:checkboxvalue','update:input1' ,'update:quesry','handleChange'])


// 第一行
let isShow1 = ref<boolean>(props.isShow1)//第一行是否显示
let isShowcheckbox1 = ref<boolean>(props.isShowcheckbox1)//第一行是否显示单选框
let checkboxvalue = ref<boolean>(props.checkboxvalue)//第一行复选框绑定的值
let title1 = ref<string>(props.title1)//第一行标题
let input1 = ref<string>(props.input1)//第一行输入框内容
let isShowbutton1 = ref<boolean>(props.isShowbutton1)//第一行是否显示按钮

let buttontext1 = ref<string>(props.buttontext1)//第一行按钮文字
let titleMinwidth = ref<string>(props.titleMinwidth)//设置标题最小宽度

// 新增：监听输入框变化，通知父组件
watch(input1, (newValue) => {
  emit('update:input1', newValue);
});

watch(checkboxvalue, (newValue) => {
  emit('update:checkboxvalue', newValue);
});

const handleCheckboxChange = (e: any) => {
  // 更新本地响应式变量
  checkboxvalue.value = !checkboxvalue.value;
  console.log(checkboxvalue.value)
  // 通知父组件更新
  emit('update:checkboxvalue',checkboxvalue.value);
};

// 弹出查询页面
let popup = ref<boolean>(false);
const open = () => {
    console.log(title1.value)

    //判断是否为物料，是物料需要打开物料查询页面
    if(title1.value == "物料"){
        opeMaterialInquiry()
    }else if(buttontext1.value == "查询"){
        // 如果是按钮是查询，就告诉父页面查询数据
        emit('update:quesry')
    }
    else{
    // 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
    (popup.value as any).open("bottom")
    }

};
// 接收子组件返回的事件
const propspuop = (data: any) => {
    console.log(data);
    if (!data.popup) {
        (popup.value as any).close()
    }
  

}


const opeMaterialInquiry = () => {
    uni.navigateTo({
        url: '/pages/index/MaterialInquiry',
    })
}
// 新增：监听输入框回车，通知父组件
const handleChange = () => {
    emit('handleChange');
  };


</script>

<style scoped>
.selectpoput-view {
    width: 100%;
    height: 100%;
}

.function-input1 {
    /* padding: 2px 10px; */
    display: flex;
    height: 45px;
}



.function-input1-checkbox {
    transform: scale(1.2);
    margin: 7px;

}

.function-input1-checkbox-box {
    height: 50px;
    width: 43px;
}

.function-input1-text {

    font-size: 20px;
    color: #333;
    margin-top: 5px;
    margin-right: 15px;
}

.function-input1-buttonview {
    width: 60px;
    height: 40px;
    margin-left: 10px;

}

.function-input1-button {
    width: 60px;
    height: 40px;
    background-color: #F7F3F1;
    border-radius: 10px;
    background-color: dodgerblue;
    line-height: 30px;
    color: #FFFFFF;
}

.function-input1-button1 {
    font-size: 16px;
    line-height: 38px;
}
</style>